<template>
  <a-space style="margin-bottom: 20px;">
<!--    <a-input-search placeholder="请输入学校名称搜索" style="width: 320px">-->
<!--      <template #enterButton>-->
<!--        <a-button>-->
<!--          <SearchOutlined type="search"/>-->
<!--        </a-button>-->
<!--      </template>-->
<!--    </a-input-search>-->
    <a-button type="primary" @click="userFormRef.open('新增用户')">新增</a-button>
  </a-space>
  <a-table
      :loading="loading"
      :columns="columns"
      :data-source="list"
      :pagination="pagination"
      @change="handleChange"
      row-key="id"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'orgName'">
        {{ record.orgName }}
      </template>
      <template v-if="column.dataIndex === 'roleNames'">
        <a-tag color="red" v-if="record.isSuperAdmin">超级管理员</a-tag>
        <template v-else>
          <a-tag v-for="(el,index) in record.roleNames" :key="index" color="blue">
            {{ el }}
          </a-tag>
        </template>
      </template>
      <template v-if="column.dataIndex === 'status'">
        {{ $filters.dictText(record.status, 'USER_STATUS') }}
      </template>
      <template v-if="column.dataIndex === 'action'">
        <a-button v-if="record.isSuperAdmin" disabled>
          <lock-outlined/>
        </a-button>
        <a-space v-else>
          <a href="javascript:void(0)" @click="userFormRef.open('编辑用户',record)">
            <edit-outlined style="margin-right: 5px;"/>
            编辑
          </a>
          <a-divider type="vertical"/>
          <a-popconfirm
              key="remove"
              title="确定删除吗?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleRemove(record)"
          >
            <a href="javascript:void(0)" style="color:red">
              <delete-outlined style="margin-right: 5px;"/>
              删除
            </a>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
  <user-form ref="userFormRef" @ok="loadData"/>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import { DeleteOutlined, EditOutlined, SearchOutlined, LockOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { PageParam } from '@/config/common'

import UserForm from '@/page/system/user/modules/UserForm.vue'
import { useStore } from '@/store/store'
import { getUsers, removeUser } from '@/api/sys-user'
import { usePagination } from '@/modules/use-modules'

const userFormRef = ref<InstanceType<typeof UserForm>>()
const columns = [
  {
    title: '账号',
    dataIndex: 'username'
  },
  {
    title: '昵称',
    dataIndex: 'nickName'
  },
  {
    title: '机构',
    dataIndex: 'orgName'
  },
  {
    title: '角色',
    dataIndex: 'roleNames'
  },
  {
    title: '状态',
    dataIndex: 'status'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '300px'
  }
]

const {
  pagination,
  loading,
  list,
  handleChange,
  loadData
} = usePagination<any>((page: PageParam) => {
  return getUsers(page, {})
})

const handleRemove = async (record: any) => {
  await removeUser(record.id)
  message.info('删除成功')
  await loadData()
}

const store = useStore()
store.dispatch('LoadDictData', ['sex'])

loadData()
</script>
